﻿<script type="text/javascript">    var djConfig = { parseOnLoad: true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/tundra/tundra.css" />
<script  type ="text/javascript" src="@Url.Content("/js/mapScripts.js")" ></script>
<script defer="defer" type="text/javascript">

    dojo.addOnLoad(InitializeMapScriptsDojo);
    initializeContacts();

    $(document).ready(function () {

        $("#mapSideBar_ActiveLayers").click();

        $(".baseMapSelector").click(function () {
            toggleSelectedBaseMap($(this).prop("id"));
        });
        $(".baseMapSelector").mouseover(function () {
            $(this).addClass("baseMapHover");
        });
        $(".baseMapSelector").mouseout(function () {
            $(this).removeClass("baseMapHover");
        });

    });

    function initializeContacts() {
        var sourceUrl = "@Url.Action("GetContacts", "Home") ";
            //the ajax call is a Json object
            $.ajax({
                type: "Post",
                url: sourceUrl,
                contentType: "application/json; charset=utf-8",
                success: function (contacts) {
                     alert(contacts);
                },
                failure: function () { alert("failed"); }
            });

        }


        function toggleSelectedBaseMap(baseMapId) {
            //Handle the UI goodness
            $(".baseMapSelector").each(function () {
                if ($(this).hasClass("baseMapSelected")) {
                    $(this).removeClass("baseMapSelected");
                }
            });
            $("#" + baseMapId).addClass("baseMapSelected");

            var numOfBaseMaps = 3;
            //Switch the actual visible base layers
            for (var index = 0; index < numOfBaseMaps; index++) {
                if (mapLayers[index].id == (baseMapId)) {
                    mapLayers[index].show();
                }
                else {
                    mapLayers[index].hide();
                }
            }
        }


</script>

<div id="mapContainer" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false">
    <div id="baseMapSelectorWrapper">
        <div id="streets" class="baseMapSelector baseMapSelected">
            <p>Streets</p>
        </div>
        <div id="aerial" class="baseMapSelector">
            <p>Aerial</p>
        </div>
        <div id="topo" class="baseMapSelector">
            <p>Topo</p>
        </div>
    </div>
    @Html.Partial("_MapToolBarPartial")
    <!--render toolbar partial-->
    <div id="divmap" dojotype="dijit.layout.ContentPane" region="center" style="overflow: hidden;">
    </div>
</div>
